<template>
    <div class="year">
        <p
            v-for="item in clickList"
            :key="item.value"
            class="item"
            :class="{ active: active === item.value }"
            @click="clickItem(item)"
        >
            <span v-if="item.value !== 3">{{ item.label }}</span>
            <el-popover
                v-else
                placement="bottom-start"
                trigger="click"
                width="auto"
                :teleported="false"
            >
                <template #reference>
                    <el-date-picker
                        ref="datePicker"
                        v-model="selectedDateArr"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="handleDateChange"
                        size="small"
                    >
                        <template #handleOpen>{{ item.label }}</template>
                    </el-date-picker>
                </template>
            </el-popover>
        </p>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, nextTick } from 'vue';

const clickList = reactive([
    { label: '年', value: 1 },
    { label: '月', value: 2 },
    { label: '日期', value: 3 }
]);

const active = ref<number | null>(null);
// 日期选择的值
const selectedDateArr = ref([]);

// 用于显示的文字
const displayDate = ref('点击选择日期');

// 控制弹出框的显示状态
const datePicker = ref();

const clickItem = async (item: { value: number }) => {
    active.value = item.value;

    if (item.value === 3) {
    }
};
</script>

<style scoped lang="less">
.year {
    height: 30px;
    font-size: 14px;
    font-family: SourceHanSansCN-Regular;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .item {
        width: 60px;
        position: relative;
        margin-left: 8px;
        border: 1px solid #8fb3e5;
        border-radius: 5px;
        color: #6e7aa1;
        height: 24px;
        line-height: 25px;
        cursor: pointer;
    }

    .active {
        color: #fff !important;
        background-image: radial-gradient(
            farthest-side,
            #0a0c17,
            hsla(0, 0%, 100%, 0.09411764705882353)
        ) !important;
    }
}

:deep( .el-icon) {
    display: none;
}
:deep(.el-range-editor--small.el-input__wrapper ){
    width: 1px;
    height: 1px;
}
:deep(.el-picker-panel) {
    color: #dadada !important;
    border: 1px solid #4060a9 !important;
    background: #0f152d !important;
}

:deep(.el-date-table td.next-month,
.el-date-table td.prev-month) {
    color: #97989b !important;
}

:deep(.el-date-picker__header-label,
.el-date-table th) {
    color: #fff;
}

:deep(.el-popper[x-placement^='bottom'] .popper__arrow:after) {
    border-bottom-color: #4060a9;
}

:deep(.el-picker-panel__icon-btn) {
    color: #fff;
}

:deep(.el-date-range-picker__content.is-left) {
    border-right: 1px solid rgba(64, 96, 169, 0.3333333333333333) !important;
}
</style>
